<template>
	<view class="page">
		<unio2o-search></unio2o-search>
		<view class="pl30  bg-w box-shadow-bottom unio2o-nav-body">
			<scroll-view class="unio2o-nav" :scroll-left="scrollLeft" scroll-x="true">
				<view @click="scrollSelect" :data-index="0" :class="{ 'on': selectIndex == 0 }" class="item">
					<view class="pt20">推荐</view>
					<view class="bg-main"></view>
				</view>
				<view @click="scrollSelect" v-for="(item, index) in cats" :key="index" :data-index="index + 1"
					:class="{ 'on': selectIndex == index + 1 }" class="item">
					<view class="pt20">{{ item.name }}</view>
					<view class="bg-main"></view>
				</view>
			</scroll-view>
		</view>
		<swiper :indicator-dots="false" :autoplay="false" :current="selectIndex" @change="swiperChange"
			class="unio2o-page-main">
			<swiper-item class="unio2o-page-main">
				<scroll-view class="unio2o-page-main" scroll-y="true">
					<unio2o-home @linkMore="linkMore"></unio2o-home>
				</scroll-view>
			</swiper-item>
			<swiper-item class="unio2o-page-main" v-for="(item, index) in cats" :key="index">
				<scroll-view class="unio2o-page-main" scroll-y="true">
					<unio2o-list :index="index" :datas="cats[index].datas" :banner="cats[index].banner" :cats="cats[index].childCats"></unio2o-list>
				</scroll-view>
			</swiper-item>
		</swiper>


		<!-- <unio2o-coupon-alert></unio2o-coupon-alert> -->
		<unio2o-coupon-activity-alert></unio2o-coupon-activity-alert>
		<unio2o-footer></unio2o-footer>
	</view>
</template>

<script>
import unio2oSearch from '@/components/base/search/search.vue';
import unio2oHome from './components/home.vue';
import unio2oList from './components/list.vue';
import unio2oCouponAlert from '@/components/module/coupon/alert.vue';
import unio2oCouponActivityAlert from '@/components/module/coupon/activityAlert.vue';
import {api} from '@/api/mock/home.js';
export default {
	components: {
		unio2oSearch,
		unio2oHome,
		unio2oList,
		unio2oCouponAlert,
		unio2oCouponActivityAlert
	},
	data() {
		return { //数据获取从外层来获取
			selectIndex: 0,
			scrollLeft: 0,
			cats: []
		}
	},
	onLoad() {
		this.getHome();
	},
	computed: {
		offsetTop() {
			return uni.upx2px(246);
		}
	},
	methods: {
		async getHome() {
			const res = await api.getHome();
			if (res.code == 0) {
				console.log(res.data)
				this.cats = res.data;
			}
		},
		selectLeftComputed() {
			let leftP = 0;
			if (this.selectIndex > 0) {
				leftP += uni.upx2px(124);
				for (var a in this.cats) {
					if (a < this.selectIndex - 1) {
						leftP += uni.upx2px(this.cats[a].name.length * 32);
						leftP += uni.upx2px(60);
					}
				}
			}
			this.scrollLeft = leftP;
		},
		swiperChange(e) {
			this.selectIndex = e.detail.current;
			this.selectLeftComputed();
		},

		scrollSelect(e) {
			this.selectIndex = e.currentTarget.dataset.index;
		},
		linkMore() {
			this.selectIndex = 1;
			this.selectLeftComputed();
		}
	}
}
</script>

<style>
.unio2o-page-main {
	height: calc(100vh - 300rpx - env(safe-area-inset-bottom));
}
</style>
